import { ref, reactive, watch } from 'vue'
import { deleteObjBlank } from '@/assets/js/common.js'
import { message } from 'ant-design-vue'
message.config({
  top: `100px`,
  duration: 2,
  maxCount: 3
})

export default function useTable({ api, getParams, makeDataCb, paginationOptions, usePagination = true }) {
  const renderData = ref([])
  const info = ref([])
  const loading = ref(false)
  // 默认分页配置
  const pagination = reactive({
    total: 0,
    current: 1,
    // pageNum: 1,
    pageSize: 30,
    pageSizeOptions: ['30', '50', '70'],
    showTotal: (total, range) => {
      return '共' + total + '条'
    },
    showQuickJumper: true,
    showSizeChanger: true
  })

  // 合并配置
  Object.assign(pagination, paginationOptions)

  const makeInitParams = () => (getParams ? getParams() : {})

  const formModel = ref(makeInitParams())

  const fetchData = (type = 'get') => {
    if (!api) return

    if (type === 'reset') {
      formModel.value = makeInitParams()
    }

    const paramsWithPagination = {
      pageNum: pagination.current,
      pageSize: pagination.pageSize,
      ...formModel.value
    }
    console.log('paramsWithPagination', paramsWithPagination)
    const params = usePagination ? paramsWithPagination : formModel.value
    deleteObjBlank(params)

    loading.value = true

    api(params)
      .then(res => {
        // 如果有分页，则返回数据结构为 { total:0, list:[] }
        if (res.success) {
          info.value = res.data
          if (usePagination) {
            // 如果传入数据处理函数，则调用该函数处理数据
            const afterMakeData = makeDataCb ? makeDataCb(res.object.list) : res.object.list
            renderData.value = afterMakeData.map((t, idx) => ({ ...t, no: idx + 1 }))
            pagination.total = res.object.total
          } else {
            // 如果没有分页，则返回数据结构为 [ ]
            const afterMakeData = makeDataCb ? makeDataCb(res.object) : res.object
            renderData.value = afterMakeData.map((t, idx) => ({ ...t, no: idx + 1 }))
            pagination.total = res.object.length
          }
        }
      })
      .finally(() => {
        loading.value = false
      })
  }

  const handleReset = () => {
    pagination.current = 1
    fetchData('reset')
  }

  const handleSearch = (num = 0) => {
    if (num) {
      pagination.current = num
    }
    fetchData()
  }

  const handleTableChange = paginationData => {
    console.log('paginationData', paginationData)
    pagination.current = paginationData.current
    pagination.pageSize = paginationData.pageSize
    fetchData()
  }

  // 给搜索选项用的函数
  const buttonSearch = () => {
    if (Object.keys(formModel.value).length == 0) {
      message.warning('请输入你要搜索的内容！！！')
      return
    }
    handleSearch(1)
  }

  // const onPageChange = (current) => {
  //   pagination.current = current
  //   if (usePagination) fetchData()
  // }

  // const onPageSizeChange = (pageSize) => {
  //   pagination.pageSize = pageSize
  //   if (usePagination) handleSearch(1)
  // }

  return {
    info,
    renderData,
    loading,
    pagination,
    formModel,
    fetchData,
    handleReset,
    handleSearch,
    handleTableChange,
    buttonSearch
  }
}
